<template>
    <div class="static-analyse-template">
        <h4 class="header">统计分析数据</h4>
        <div class="content">
            <el-tabs class="static-tabs" v-model="activeTab" @tab-click="handleTabClick">
                <el-tab-pane v-for="tab in tabs" :label="tab.label" :name="tab.name" :key="tab.name">
                    <slot :name="slotName"></slot>
                </el-tab-pane>
            </el-tabs>
        </div>
        <SimpleStaticChartTemplate class="static-chart-content" ref="staticChartContent"
                                   :title="activeTab" :slotName="slotName"></SimpleStaticChartTemplate>
    </div>
</template>

<script>
    import SimpleStaticChartTemplate from "@/components/SimpleStaticChartTemplate.component"

    export default {
        name: "StaticAnalyse",
        components: {SimpleStaticChartTemplate},
        data() {
            return {
                activeTab: '业务数据',
                tabs: [
                    {label: '业务数据', name: '业务数据'},
                    {label: '产品销售数据', name: '产品销售数据'},
                    {label: '销售执行力', name: '销售执行力'},
                    {label: '销售业绩', name: '销售业绩'},
                    {label: '销售形势预测', name: '销售形势预测'},
                ],
                slotName: 'staticChartContent'
            }
        },
        methods: {
            handleTabClick(tab, event) {

            }
        }
    }
</script>

<style lang="scss">
    .static-analyse-template {
        background-color: #ffffff;
        width: 100%;
        height: 100%;
        .header {
            text-align: center;
        }
        .content {
            .static-tabs {
                padding: 0 15px;
                .el-tabs__header .el-tabs__nav-wrap {
                    .el-tabs__nav-scroll {
                        margin-bottom: 5px;
                        .el-tabs__active-bar {
                            display: none;
                        }
                    }
                    .el-tabs__item {
                        border: 1px solid #ddd;
                        padding: 0 20px;
                        margin: 0 4px;
                        font-weight: 600;
                        &:first-child {
                            margin-left: 0;
                        }
                        &:last-child {
                            margin-right: 0;
                        }
                    }
                }
            }
        }
    }
</style>